<template>
  <div class="manage">
    <!-- 工具栏 -->
    <Toolbar>
      <template #left>
        <div class="left-item">
          <span>处置状态：</span>
          <el-select v-model="searchInfo.caseStatus" placeholder="请选择" size="small">
            <el-option
              v-for="item in select_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="left-item">
          <span>处置单位：</span>
          <el-select v-model="searchInfo.unitId" placeholder="请选择" size="small">
            <el-option
              v-for="item in select_unit"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="left-item">
          <span>案发时间：</span>
          <el-date-picker
            v-model="searchInfo.caseTime"
            type="date"
            @change="changeDate"
            size="small"
            placeholder="选择日期"
          ></el-date-picker>
        </div>
      </template>
      <template #right>
        <div class="right-item">
          <el-button size="small" type="info" plain @click="remake">重置</el-button>
          <el-button size="small" type="info" plain @click="queryTable">查询</el-button>
          <el-button size="small" type="info" @click="add">新增灾情</el-button>
        </div>
      </template>
    </Toolbar>

    <!-- 表格展示 -->
    <div class="table mt15">
      <el-table :data="tableData" border style="width: 100%" v-loading="loading">
        <el-table-column type="index" align="center"></el-table-column>
        <el-table-column align="center" prop="caseInfo" label="案件名称"></el-table-column>
        <el-table-column align="center" prop="caseType" label="灾情类型">
          <template #default="{ row }">
            <span>{{ row.caseType | getType }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="caseTime" label="案发时间"></el-table-column>
        <el-table-column align="center" prop="caseAddress" label="灾情位置">
          <template #default="{ row }">
            <el-popover placement="top-start" width="200" trigger="hover" :content="row.caseAddress">
              <span style="width: 100%; display: block" class="OPoint" slot="reference">
                {{ row.caseAddress }}
              </span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="casePerson" label="受灾人员"></el-table-column>
        <el-table-column align="center" prop="caseBuild" label="受灾建筑"></el-table-column>
        <el-table-column align="center" prop="caseArea" label="受灾面积"></el-table-column>
        <el-table-column align="center" prop="caseReason" label="灾情原因">
          <template #default="{ row }">
            <el-popover placement="top-start" width="200" trigger="hover" :content="row.caseReason">
              <span style="width: 100%; display: block" class="OPoint" slot="reference">
                {{ row.caseReason }}
              </span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="manageUnit" label="主管单位"></el-table-column>
        <el-table-column align="center" prop="caseStatus" label="状态" width="80">
          <template #default="{ row }">
            <span>{{ row.caseStatus | getStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="completeTime" label="结案时间">
          <template #default="{ row }">
            <span>{{ row.completeTime || '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120">
          <template #default="{ row }">
            <el-button type="text" size="mini" @click="edit(row)">编辑</el-button>
            <el-button type="text" size="mini" @click="detail(row)">结案详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 翻页 -->
    <div class="switchTable">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchInfo.pageNum"
        :page-size="searchInfo.pageSize"
        :page-sizes="[10, 20, 50]"
        :total="totalPage"
        background
        layout="sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>

    <!-- 新增灾情 -->
    <el-dialog :title="title" :visible.sync="showdialog_add" width="600px">
      <div>
        <el-form
          :model="ruleForm"
          label-position="left"
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          class="demo-ruleForm"
        >
          <el-form-item label="案件名称" prop="caseInfo">
            <el-input v-model="ruleForm.caseInfo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="灾情类型" prop="caseType">
            <el-select style="width: 100%" v-model="ruleForm.caseType" placeholder="请选择">
              <el-option
                v-for="item in select_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主管单位" prop="unitId">
            <el-select style="width: 100%" v-model="ruleForm.unitId" placeholder="请选择">
              <el-option
                v-for="item in select_unit"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="案发时间" prop="caseTime">
            <el-date-picker
              style="width: 100%"
              v-model="ruleForm.caseTime"
              @change="changeDateSub"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="受灾人员" prop="casePerson">
            <el-input v-model="ruleForm.casePerson" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="受灾建筑" prop="caseBuild">
            <el-input v-model="ruleForm.caseBuild" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="灾情位置" prop="caseAddress">
            <el-input disabled v-model="ruleForm.caseAddress" placeholder="请选择">
              <i @click="openMap" slot="suffix" class="el-input__icon el-icon-location"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="受灾面积" prop="caseArea">
            <el-input v-model="ruleForm.caseArea" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="灾情原因" prop="caseReason">
            <el-input v-model="ruleForm.caseReason" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="结案资料" prop="appendix">
            <el-upload
              class="upload-demo"
              action=""
              :file-list="fileList"
              :http-request="uploadFile"
              :on-remove="removeFile"
              :limit="1"
            >
              <el-button size="small" type="info">选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 案件详情弹窗 -->
    <el-dialog title="结案详情" v-if="showdialog_detail" :visible.sync="showdialog_detail" width="60%">
      <div style="height: 400px" class="dfc">
        <div v-if="pdfUrl" style="height: 100%; width: 100%">
          <iframe style="height: 100%; width: 100%" :src="pdfUrl" frameborder="0"></iframe>
        </div>
        <div v-else>暂未结案</div>
      </div>
    </el-dialog>

    <!-- 地图弹窗 -->
    <el-dialog append-to-body :visible.sync="showdialog_map" width="80%">
      <div style="height: 500px">
        <XyMap @change="changePoint" :lnglat="lnglat" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDispatchInfoApi, getOrgUnitApi, addOrUpdateApi } from '@/utils/api';
import XyMap from '@/components/xy-map.vue';
import { turnPage } from '@/mixins/turnPage';

export default {
  mixins: [turnPage],
  name: 'Manage',
  components: {
    XyMap
  },
  data() {
    return {
      loading: false,
      showdialog_add: false /* 新增弹窗 */,
      showdialog_detail: false /* 案件详情弹窗 */,
      showdialog_map: false /* 地图弹窗 */,
      tableData: [] /* 表格数据 */,
      totalPage: 1 /* 表格总数 */,
      ruleForm: {
        caseInfo: '',
        caseType: '',
        caseTime: '',
        manageUnit: '',
        unitId: '',
        caseAddress: '',
        casePerson: '',
        caseBuild: '',
        caseArea: '',
        caseReason: '',
        appendix: '',
        longitude: '',
        latitude: '',
        completeTime: ''
      } /* 表单 */,
      rules: {
        caseInfo: [{ required: true, message: '请填写案件名称', trigger: 'blur' }],
        caseType: [{ required: true, message: '请选择案件类型', trigger: 'change' }],
        caseTime: [{ required: true, message: '请选择案发时间', trigger: 'change' }],
        unitId: [{ required: true, message: '请选择主管单位', trigger: 'change' }],
        caseAddress: [{ required: true, message: '请选择案件地点', trigger: 'change' }],
        casePerson: [{ required: true, message: '请填写受灾人员', trigger: 'blur' }],
        caseBuild: [{ required: true, message: '请填写受灾建筑', trigger: 'blur' }],
        caseArea: [{ required: true, message: '请填写受灾面积', trigger: 'blur' }],
        caseReason: [{ required: true, message: '请填写灾情原因', trigger: 'blur' }]
      } /* 表单校验规则 */,
      fileList: [],
      select_status: [
        {
          label: '处理中',
          value: 1
        },
        {
          label: '已结案',
          value: 2
        }
      ],
      select_type: [
        {
          label: '火灾扑救',
          value: '1'
        },
        {
          label: '抢险救援',
          value: '2'
        },
        {
          label: '社会救助',
          value: '3'
        },
        {
          label: '其他灾情',
          value: '4'
        }
      ],
      select_unit: [],
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        unitId: '',
        caseStatus: '',
        caseTime: ''
      } /* 检索信息 */,
      title: '新增灾情',
      lnglat: [],
      pdfUrl: ''
    };
  },
  created() {
    this.init();
  },
  filters: {
    getType(val) {
      switch (val) {
        case '1':
          return '火灾扑救';
        case '2':
          return '抢险救援';
        case '3':
          return '社会援助';
        default:
          return '其他灾情';
      }
    },
    getStatus(val) {
      switch (val) {
        case '1':
          return '处理中';
        default:
          return '已结案';
      }
    }
  },
  methods: {
    // 初始化
    init() {
      this.queryTable();
      this.getOrgUnit();
    },

    // 获取主管单位列表
    async getOrgUnit() {
      const res = await getOrgUnitApi();

      if (res.success) {
        this.select_unit = [];

        res.data.map((item) => {
          this.select_unit.push({
            value: item.orgId,
            label: item.orgName
          });
        });
      } else {
        this.$toast(res.msg);
      }
    },

    // 查询表格数据
    async queryTable() {
      this.loading = true;
      const res = await getDispatchInfoApi(this.searchInfo);
      this.loading = false;

      if (res.success) {
        this.totalPage = res.data.total;
        this.tableData = res.data.list;
      } else {
        this.$toast(res.msg);
      }
    },

    // 格式化时间
    changeDateSub(val) {
      this.ruleForm.caseTime = $xy.FD(val);
    },

    // 重置
    remake() {
      this.searchInfo = {
        pageNum: 1,
        pageSize: 10,
        unitId: '',
        caseStatus: '',
        caseTime: ''
      };

      this.queryTable();
    },

    // 表单重置
    remakeForm() {
      this.ruleForm = {
        caseInfo: '',
        caseType: '',
        caseTime: '',
        unitId: '',
        manageUnit: '',
        caseAddress: '',
        casePerson: '',
        caseBuild: '',
        caseArea: '',
        caseReason: '',
        appendix: '',
        longitude: '',
        latitude: '',
        completeTime: ''
      };

      this.fileList = [];
    },

    // 日期选择更改
    changeDate(val) {
      this.searchInfo.caseTime = $xy.FD(val);
    },

    // 提交
    submit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.appendix) {
            this.ruleForm.caseStatus = '2';
            this.ruleForm.completeTime = $xy.FD(new Date());
          } else {
            this.ruleForm.caseStatus = '1';
            this.ruleForm.completeTime = '';
          }

          this.select_unit.map((item) => {
            if (item.value === this.ruleForm.unitId) {
              this.ruleForm.manageUnit = item.label;
            }
          });

          const res = await addOrUpdateApi(this.ruleForm);

          if (res.success) {
            this.$message.success('已提交');
            this.showdialog_add = false;
            this.queryTable();
          } else {
            this.$toast(res.msg);
          }
        } else {
          return false;
        }
      });
    },

    // 新增
    add() {
      delete this.ruleForm.id;
      this.title = '新增灾情';
      this.showdialog_add = true;
      this.remakeForm();
    },

    // 编辑
    edit(row) {
      this.title = '编辑灾情';
      this.showdialog_add = true;
      this.ruleForm.id = row.id;
      this.ruleForm.caseInfo = row.caseInfo;
      this.ruleForm.caseType = row.caseType;
      this.ruleForm.caseTime = row.caseTime;
      this.ruleForm.manageUnit = row.manageUnit;
      this.ruleForm.unitId = row.unitId;
      this.ruleForm.caseAddress = row.caseAddress;
      this.ruleForm.casePerson = row.casePerson;
      this.ruleForm.caseBuild = row.caseBuild;
      this.ruleForm.caseArea = row.caseArea;
      this.ruleForm.caseReason = row.caseReason;
      this.ruleForm.appendix = row.appendix;
      this.ruleForm.longitude = row.longitude;
      this.ruleForm.latitude = row.latitude;
      this.ruleForm.completeTime = row.completeTime;
      this.fileList = [];

      if (this.ruleForm.appendix) {
        this.fileList.push({
          name: '结案资料',
          url: this.ruleForm.appendix
        });
      }
    },

    // 上传资料
    async uploadFile(file) {
      const res = await $xy.UF(this.$baseUrl, [file]);

      if (res.success) {
        this.ruleForm.appendix = this.$baseUrl + res.data.fileSavePath;
      } else {
        this.$toast(res.msg);
      }
    },

    // 删除资料
    removeFile(file) {
      this.ruleForm.appendix = '';
    },

    // 打开地图
    openMap() {
      this.showdialog_map = true;

      this.lnglat = [];
      setTimeout(() => {
        if (this.ruleForm.longitude && this.ruleForm.latitude) {
          this.lnglat = [this.ruleForm.longitude, this.ruleForm.latitude];
        }
      });
    },

    // 地图点位改变
    changePoint(mapInfo) {
      this.ruleForm.caseAddress = mapInfo.address;
      this.lnglat = [mapInfo.lng, mapInfo.lat];
      this.ruleForm.longitude = this.lnglat[0];
      this.ruleForm.latitude = this.lnglat[1];
      this.showdialog_map = false;
    },

    // 详情
    detail(row) {
      this.pdfUrl = row.appendix;
      this.showdialog_detail = true;
    }
  }
};
</script>

<style lang="scss">
.manage {
  padding: 20px;
  font-size: 14px;

  .left-item {
    & > span {
      font-size: 13px;
      color: #666;
      margin-right: 5px;
    }

    .el-select {
      margin-right: 20px;
    }
  }

  .switchTable {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
  }

  .el-dialog {
    margin-top: 8vh !important;
  }

  .el-dialog__footer {
    padding-top: 0;
  }

  .el-icon-location {
    width: 30px;
    cursor: pointer !important;
  }
}
</style>
